<!DOCTYPE html>
<html lang="en"xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>work:2020.07.01</title>
</head>
<body>
<div id="app1">
    <div v-if="books.length">
        <table >
            <thead>
            <tr>
                <th></th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in books">
                <th>{{index}}</th>
                <th>{{item.name}}</th>
                <th>{{item.data}}</th>
                <th>{{item.pace}}</th>
                <th><button v-on:click="">-</button>{{item.sum}}<button v-on:click="">+</button></th>
                <th><button v-on:click="">{{item.handle}}</button></th>
            </tr>
            </tbody>
        </table>
        <h3>总价格：￥320.00</h3>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    var bb=new Vue({
        el:'#app1',
        data:{
            books: [
                {
                    data: '2010-10',
                    pace: '￥60.00',
                    sum:'1',
                    handle:'删除',
                    name:'《Java从入门到放弃》',

                    },
                {
                    data: '2010-11',
                    pace: '￥80.00',
                    sum:'1',
                    handle:'删除',
                    name:'《Vue从入门到放弃》',

                    },
                {
                    data: '2010-11',
                    pace: '￥80.00',
                    sum:'1',
                    handle:'删除',
                    name:'《PHP从入门到放弃》',

                },
                {
                    data: '2010-12',
                    pace: '￥100.00',
                    sum:'1',
                    handle:'删除',
                    name:'《ABC从入门到放弃》',

                },
            ]
        }
    });

</script>
</body>
</html>